<template>
	  
	<div>
		    <!-- v-focus="'我是你爸爸'" -->
		    <input v-model="text" type="text" />

		    
		<h2 v-content="text"></h2>
		  
	</div>
</template>
<script>
export default {
	data() {
		return {
			text: '你爸爸是我',
		}
	}, // 组件内的自定义指令
	directives: {
		focus: {
			// 初始化指令-执行一次
			bind(el) {
				console.log(el)
			}, // 指令的生命周期
			inserted(el, binding) {
				//  el.value = '111'
				el.style.color = 'red' // el.focus()
				el.value = binding.value
			}, // 更新
			update(el) {
				console.log(el)
			}, // 所有被包含的组件更新
			componentUpdated(el) {
				console.log(el)
			}, // 解除指令
			unbind(el) {
				console.log(el)
			},
		},
		content: {
			componentUpdated(el, binding) {
				el.innerText = binding.value
			},
			inserted(el, binding) {
				// 判断el的类型
				el.innerText = binding.value
			},
		},
	},
	mounted() {
		// 如何让页面加载完成后，让input获取焦点
		// 除了ref 自定义指令
		// this.$refs.input.focus()
	},
}
</script>